<template>
	<div>
		<!-- 全局数据操作按钮 -->
		<p>
			<button class="btn btn-white btn-default btn-round" @click="list(1)">
				<i class="ace-icon fa fa-refresh"></i>刷新
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="add">
				<i class="ace-icon glyphicon glyphicon-plus"></i>新增
			</button>
			&nbsp;
			<button class="btn btn-white btn-default btn-round" @click="test">
				<i class="ace-icon glyphicon glyphicon-tent"></i>测试
			</button>
		</p>


		<!--模态框 -->
		<div>
			<save id="save-modal" :course="course" :categoryIdList="categoryIdList"></save>
			<contentModal id="content-modal" :course="course" ref="contentModal"></contentModal>
		</div>

		<!-- 列表数据 -->
		<div class="row">
			<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6"  v-for="item in courses" :key="item.id">
				<div class="thumbnail ">
					<img class="media-object"  :src="item.image || courseDefaultImage" style="height: 115px;"/>
					<div class="caption">
						<div class="clearfix">
							<span class="pull-right label label-primary info-label">
								{{$global.enums.getValue(item.level, COURSE_LEVEL)}}
							</span>
							<span class="pull-right label label-grey info-label">
								{{$global.enums.getValue(item.charge, CHARGE)}}
							</span>
							<span class="pull-right label label-blue info-label">
								{{$global.enums.getValue(item.status, COURSE_STATUS)}}
							</span>
						</div>

						<h3 class="search-title">
							<a href="#" class="blue overflow-hide">{{item.name}}</a>
						</h3>
								
						<p class="summary"><span>{{item.summary}}</span></p>
						
						<p class="course-info-labels overflow-hide">
							<span class="label label-xs label-primary arrowed arrowed-right">
								<i class="glyphicon glyphicon-user"></i>&nbsp;{{item.enroll}}
							</span>
							<span class="label label-xs label-primary arrowed arrowed-right">
								<i class="glyphicon glyphicon-time"></i>&nbsp;{{$global.format.formatSecond(item.time)}}
							</span>
							<span class="label label-xs label-primary arrowed arrowed-right">
								<i class="glyphicon glyphicon-yen"></i>&nbsp;{{item.price}}
							</span>
						</p>
						
						<p><operation :course="item"/></p>
					</div>
				</div>
			</div>
		</div>

		<div class="paginations">
			<pagination :list="list" ref="pagination"></pagination>
		</div>
	</div>
</template>

<script>
	import operation from '@/views/course/components/operation'
	import save from '@/views/course/components/save'
	import contentModal from '@/views/course/components/content'	
	import pagination from '@/views/components/pagination'

	export default {
		name: 'course',
		data() {
			return {
				courses: [],
				course: {},
				categoryIdList: [],
				courseDefaultImage: '/image/demo-course.jpg',
				CHARGE: this.$global.enums.CHARGE,
				COURSE_LEVEL: this.$global.enums.COURSE_LEVEL,
				COURSE_STATUS: this.$global.enums.COURSE_STATUS
			}
		},
		components: {
			operation,
			pagination,
			save,
			contentModal
		},
		mounted() {
			this.list(1)
		},
		methods: {
			list(page) {
				let param = {
					pageIndex: page,
					pageSize: this.$refs.pagination.size
				}
				let url = process.env.VUE_APP_SERVER + 'business/admin/course/list'
				this.$axios.post(url, param)
					.then(res => {
						let data = res.data.data
						if(data.status == 0) this.$toast(data.msg, this.$global.toast.fail)
						else {
							console.log('course-list')
							this.courses = data.list
							this.$refs.pagination.render(page, data.total)
						}
					})
			},
			test() {
				let key = hex_md5(this.courseDefaultImage)
				console.log("key=" + key)
				let key10 = parseInt(key, 16)
				console.log("key10=" + key10)
				let key62 = this.$global.format.tenTo62(key10)
				console.log("key62=" + key62)
			},
			add() {
				// 级别-默认初级，收费-默认免费, 状态-默认草稿
				this.course = {
					level: this.COURSE_LEVEL[0].key,
					charge: this.CHARGE[0].key,
					status: this.COURSE_STATUS[0].key,
					image: null
				}
				this.categoryIdList = []
				$('#save-modal').modal('show')
			}

		}
	}
</script>

<style scoped>
	.table {
		margin-bottom: 5px;
	}

	.paginations {
		text-align: right;
	}
	
	.summary {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		min-height: 40px;
		text-indent: 2rem;
	}
	
	.course-info-labels > span{
		margin-right:10px;
	}
	
	.overflow-hide {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 1;
	}
</style>
